<template>
  <Layout>
    <div class="new-container">
      <el-card shadow="never" style="min-height: 400px" v-if="newGist.id">
        <div slot="header">
          <span>{{ blog.title }}</span>
        </div>
        <div style="font-size: 0.9rem; line-height: 1.5; color: #606c71">
          发布 {{ blog.createTime }} <br />
          更新 {{ blog.updateTime }}
        </div>
        <div
          style="
            font-size: 1.1rem;
            line-height: 1.5;
            color: #303133;
            border-bottom: 1px solid #e4e7ed;
            padding: 5px 0px 5px 0px;
          "
        >
          <pre style="font-family: '微软雅黑'">{{ blog.description }}</pre>
        </div>
        <div
          v-html="blog.content"
          class="markdown-body"
          style="padding-top: 20px"
        ></div>
      </el-card>
    </div>
  </Layout>
</template>

<page-query>
query {
  allNewGist {
    edges {
      node {
        id
        description
        created_at
        updated_at
        files
      }
    }
  }
}
</page-query>

<script>
export default {
  metaInfo: {
    title: "Hello, world!",
  },
  data() {
    return {
      blog: {},
    };
  },
  computed: {
    newGist() {
      return this.$page.allNewGist.edges[0].node;
    },
    files() {
      return JSON.parse(this.newGist.files);
    },
  },
  mounted() {
    let blog = {};
    for (let key in this.files) {
      blog["title"] = key;
      blog["content"] = this.$markdown(this.files[key].content);
      blog["description"] = this.newGist.description;
      blog["createTime"] = this.$util.utcToLocal(this.newGist.created_at);
      blog["updateTime"] = this.$util.utcToLocal(this.newGist.updated_at);
    }
    this.blog = blog;
  },
};
</script>

<style>
.home-links a {
  margin-right: 1rem;
}
.new-container {
  min-height: 600px;
}
</style>
